<template>
  <div id="box">
    <header>
      <van-search v-model="value" placeholder="请输入您想要的东西" show-action shape="round">
        <div slot="action" @click="onSearch">消息</div>
      </van-search>
    </header>
    <section>
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item.id"><img  class="imgs" :src=item.pimg></van-swipe-item>
        
      </van-swipe>  

      
      <div class="tap">
        <van-button class="jianding" @click="jd">鉴定</van-button>
        <van-button class="jianding" @click="conserve ">养护</van-button>
        <van-button class="jianding" @click="buy">求购</van-button>
        <van-button class="jianding"  @click="store"> 商城</van-button>
      </div>
      <div class="tap1">
        <span @click="tap1"><van-col  span="8">今日推荐</van-col></span>
        <span @click="tap"><van-col span="8">捡漏专区</van-col></span>
      </div>
      <div class="tap2">
        <p></p>
        <span>猜你喜欢</span>
      </div>
      <div class="imgs">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="item in list" :key="item.id">
            <van-image @click="tapd(item.pid)" :src=item.pimg />
            <p>{{item.pname}}</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
            <p>这是一段商品说明段商品说明段商品说明</p>
          </van-grid-item>
        
        </van-grid>
      </div>
    </section> 
    
    <footer>
      <van-tabbar v-model="active">
        <van-tabbar-item>首页</van-tabbar-item>
        <van-tabbar-item>分类</van-tabbar-item>
        <van-tabbar-item>发布</van-tabbar-item>
        <van-tabbar-item>购物车</van-tabbar-item>
        <van-tabbar-item>我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      value: "",
      active: 0,
      list: [] ,
      
      
    };
  },
  methods: {
    
    onSearch() {
      alert("a");
    },
    tapd(id) {
      console.log(id);
       this.$router.push("/details"+id);
    },
    jd() {
      this.$router.push("/jianding");
    },
    conserve() {
      this.$router.push("/conserve");
    },
    buy(){  
  
      this.$router.push("/buy")
    },
    store(){
      this.$router.push("/store")
    },
    tap1(){   
        
       this.$router.push('/daily')
    },
    tap(){ 
      this.$store.commit("tap",this.val)
      this.$router.push('/picker')
      
    }
  },
  mounted() {
    let _this = this;
    axios({
      url: "http://w34uc5.natappfree.cc/secondHand/goods/getHotGoodsType",
      
      
      
    }).then(data => {
      console.log(data.data.data);
      _this.list = data.data.data;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-size: 0.12rem;
}
section {
  flex: 1;
  overflow: auto;
}

header,
footer {
  height: 0.7rem;
  background: red;
}
ul > li {
  display: block;
  height: 1rem;
}
.imgs{
  height: 3.96rem;
}
.van-swipe {
  
  height: 3.96rem;
}
.tap {
  margin-top: 0.5rem;
}
.jianding {
  height: 1.3rem;
  width: 1.3rem;
  text-align: center;
  line-height: 1.3rem;
  margin-left: 0.4rem;
  overflow: hidden;
}
.tap1 {
  margin-top: 0.5rem;
  font-size: 0.14rem;
  color: #c8c1c1;
  height: 2.4rem;
}
.van-col {
  height: 2.4rem;
  width: 3.4rem;
  border: 0.01rem solid #c8c1c1;
  margin-left: 0.3rem;
}
.tap2 {
  margin-top: 0.3rem;
  height: 0.5rem;
}

.tap2 > p {
  height: 0.05rem;
  width: 3rem;
  background: #ddd8d8;
  margin-left: 2.4rem;
}
.tap2 > span {
  display: block;
  height: 0.5rem;
  background: #fff;
  width: 1.5rem;
  margin-left: 3.2rem;
  text-align: center;
  margin-top: -0.2rem;
  color: #ddd8d8;
}
</style>
